<script setup>
import { TagOne } from '@icon-park/vue-next'
import { toRefs } from 'vue'
import { getDictForValue } from '@/utils/dict'
const props = defineProps(['canvas'])
const { canvas } = toRefs(props)
</script>

<template>
  <div
    class="canvas-card rounded-2xl bg-white px-[20px] py-[26px] relative transition-all duration-500 cursor-pointer hover:shadow-slate-300 hover:shadow-md"
  >
    <div class="absolute right-2 top-2">
      <slot name="action"></slot>
    </div>
    <div class="flex">
      <div
        class="rounded-2xl bg-[#f3f8ff] flex items-center justify-center min-w-[56px] h-[56px] mr-4"
      >
        <TagOne
          theme="multi-color"
          size="24"
          :fill="['#333', '#417505', '#FFF', '#4a90e2']"
        />
      </div>
      <div>
        <a-tooltip :content="`模板编码：${canvas.canvasKey}`">
          <h4 class="text-arco-neutral-8 line-clamp-1 text-[15px]">{{ canvas.name || '--' }}</h4>
        </a-tooltip>

        <a-tag color="blue" size="small" class="mt-2"
          >
          尺寸： {{ canvas.sizeType }} / {{canvas.size}}
        </a-tag
        >
        <div class="text-arco-neutral-6 mt-3 text-[12px]"
          >叠加方式：{{ getDictForValue('OVERLAPRULETYPE', canvas.overlapRule || '1') }}</div
        >
         <div class="text-arco-neutral-6 mt-3 text-[12px]"
          >颜色：{{  canvas.color || '--' }}</div
        >
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.canvas-card{
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}
</style>
